<template>
    <el-dialog v-model="show" title="添加用户" @close="emit('hide')">
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item label="账号" prop="username" label-width="100px">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" prop="nickName" label-width="100px">
                <el-input v-model="form.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email" label-width="100px">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="password" label-width="100px">
                <el-input type="password" :disabled="Boolean(data)" v-model="form.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" prop="note" label-width="100px" type="textarea">
                <el-input v-model="form.note" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否启用" prop="status" label-width="100px">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelFn">取消</el-button>
                <el-button type="primary" @click="sureFn"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { reactive, ref, watch } from "vue";
import { user } from "@/api"

const form = reactive<IRegisterUserParams>({
    username: "",
    nickName: "",
    email: "",
    password: "",
    note: "",
    status: 0,
});
const emit = defineEmits(["hide", "refresh", "setEditId"]);
// 设置输入的规则
const rules = {
    // username: [
    //     { required: true, message: "请输入用户名", trigger: "blur" },
    //     { min: 6, max: 20, message: "用名要在6~20个字符之间", trigger: "blur" },
    // ],
    email: [
        { required: true, message: "请输入邮箱", trigger: "blur" },
        {
            type: "email",
            message: "请填空正确的邮箱地址",
            trigger: ["blur", "change"],
        },
    ],
    // nickName: [
    //     { required: true, message: '请输入姓名', trigger: 'blur' },
    // ],
    // password: [
    //     { required: true, message: '请输入密码', trigger: 'blur' },
    // ]
};
const formRef = ref<FormInstance>();
const sureFn = () => {
    if (!formRef) return;

    formRef.value?.validate((valid: boolean) => {
        if (valid) {
            ElMessageBox.confirm("确定要添加该用户吗？", "添加用户", {
                type: "warning",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            }).then(() => {

                if (props.data !== 0) {


                    user.upDateUserInfoApi(form as IUserList).then(res => {
                        if (res.code === 200) {


                            ElMessage.success("修改用户成功");
                            // 关闭 dialog
                            emit("hide");
                            // 刷新表格
                            emit("refresh");
                            // 初始id

                            formRef.value?.resetFields();
                            emit("setEditId");
                        }

                    })
                } else {
                    // 如果是新增，发注册用户的请求
                    // 发请求把用户添加到后端


                    user.registerUseeApi(form).then((res) => {
                        if (res.code === 200) {
                            // 添加成功
                            ElMessage.success("添加用户成功");
                            // 关闭添加的弹出
                            emit("hide");
                            // 通知父组件刷新表格
                            emit("refresh");
                            formRef.value?.resetFields();
                            emit("setEditId");

                        } else {
                            // 添加失败
                            ElMessage.success(res.message + ",请重试");
                            formRef.value?.resetFields();
                            emit("setEditId");
                        }
                    });
                }
            }).catch(() => {

            })
        } else {


            return false
        }
    })
}
const cancelFn = () => {
    emit('hide')
    formRef.value?.resetFields();
    emit("setEditId");
}
const props = defineProps({
    show: {
        type: Boolean,
        default: true,
    },
    data: {
        type: Number,
        default: 0,
    },
});

watch(
    () => props.data,
    () => {
        if (props.data === 0) {
            return;
        }

        // 否则就是点击的编辑，就可以向服务器发请求

        user.getUserInfoApi(props.data).then((res) => {
            if (res.code === 200) {
                // 把数据赋值给 表单
                Object.assign(form, res.data);
                console.log(form);

            }
        });
    }
);
</script>
  
<style scoped>

</style>